<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /> 
<link rel="stylesheet" href= "../css/pagination.css">
<style>
.cardBox {
		width: 310px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		text-align: center;
		float: left;
		padding: 20px;
		margin:18px;
		margin-right:15px;
		height:260px;
		font-size:12px;
		border-radius:8px;
	}

	.headerBox {
		color: #fff;
		padding: 15px;
		font-size: 12px;
		height: 90px;
		border-radius:8px;
	}

	.bodyBox {
		padding: 3px;
	}

	.bodyBox p {
		margin-left: 5px;
	}
	#nav1 {
  display: inline-flex;
  overflow: hidden;
  width: 98%;
  background-color: #f7f7f7;
  border-radius: 8px;
  box-shadow: 0 5px 5px rgba(159, 162, 177, 0.8);
  margin:5px 10px 10px 10px;
}

#nav1-item {
  color: #83818c;
  padding:12px;
  padding-right: 20px;
  text-decoration: none;
  transition: .3s;
  margin: 5px 6px 3px 15px;
  z-index: 1;
  font-weight: 600;
  position: relative;
  color: #FF7701;
}
#nav1 a:hover
{
	background-color:#FF7F55;
	color:white;
	border-radius:8px;
}




</style>
</head>
<body bgcolor="#F7F7F7">
<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<div style="border:0px solid red;width:100%;height:22px;float:left;border-radius:8px;">
</div>
<div style="border:0px solid red;width:100%;height:62px;float:left;border-radius:8px;">
			<nav id="nav1"> 
				<a class="test" href="javascript:void(0)" id="nav1-item">小米手机</a>
				<a class="test" href="javascript:void(0)" id="nav1-item">红米手机</a> 
				<a class="test" href="javascript:void(0)" id="nav1-item">OPPO手机</a>
				<a class="test" href="javascript:void(0)" id="nav1-item">VIVO手机</a>
				<a class="test" href="javascript:void(0)" id="nav1-item">华为手机</a> 
				<a class="test" href="javascript:void(0)" id="nav1-item">荣耀手机</a> 	
				<a class="test" href="javascript:void(0)" id="nav1-item">一加手机</a> 
				<a class="test" href="javascript:void(0)" id="nav1-item">努比亚手机</a> 
				<a class="addposts" href="javascript:void(0)" id="nav1-item">我要发帖</a> 
			</nav>
		</div>

<div style="float:left;border:0px solid red;width:100%;height:600px;" id="listpost">

</div>
<br/>
<br/>
<div class="row">
		<div class="col-md-12">
			<!-- 分页控件 -->
			<div id="page" align="center"></div>
		</div>
	</div>
	<script type="text/javascript" src="../js/jquery.pagination.js"></script>
</body>
<script>
		$(function(){
			ajax();
			function ajax(){
				$.ajax({
					url:'../list_postss?pageNum=1&pageSize=6',
					method:'get',
					success:function(result){
						listPosts(result);
						page(result);
					}
				})
			}
		});
			
		//分页
		function page(result){
			$('#page').pagination(result.total, {
				//第一个参数指定共多少条记录
		  	       items_per_page : result.pageSize, // 每页显示多少条记录
		  	       next_text : '>', //下一页按钮图标
		  	       prev_text : '<', //上一页按钮图标
		  	       num_display_entries : 5,//主体页数
		  	       num_edge_entries : 2, //边缘页数
		  	       callback : function(pageNum){//定义一个回调函数，用于每次点击页码发起分页查询请求
		  	    	   		pageNum = ++pageNum;
		  	    	   		$.ajax({
		  	 					url: '../list_postss?pageNum='+pageNum+'&pageSize='+result.pageSize,
		  	 					method: 'get',
		  	 					success: function(results){
		  	 						listPosts(results);
		  	 					}
		  	 				});
		  	       }	   
		  	});
		}
		
			function listPosts(result){
				$('#listpost').empty();
				$.each(result.list,function(index,obj){
					$('#listpost').append(
							'<div class="cardBox">'+
							'<div class="headerBox" style="background-color:#FF7701;">'+
							'<p>'+					
							'<a title="查看详情" style="cursor: pointer; color:white" target="_blank" href="../view_posts?pid='+obj.p_id+'&account='+obj.p_account+'">'+obj.p_theme+'</a><br>'+
							'<div style="width:100%;height:1px;float:left;"></div>'+
							'<span>'+'浏览量：'+obj.p_view+'</span>'+
							'</p>'+
							'</div>'+
							'<div style="width:100%;height:1px;float:left;"></div>'+
							'<div class="bodyBox">'+
							'<br/>'+
							'<p>发 帖 人：'+'<a href="'+obj.p_account+'">'+obj.p_account+'</a>'+'</p>'+
							'<p>帖子ID：'+obj.p_id+'</p>'+
							'<p>所属板块：'+'<a href="#">'+obj.p_plate+'</a>'+'</p>'+
							'<p>发帖时间：'+obj.p_time+'</p>'+
							'</div>'+
							'</div>'
							);
				});
			}
			
			
			
		$('.test').on('click',function(){
			showinfo($(this).html());
		});
		
		$('.addposts').on('click',function(){
			window.open('sendposts.html','_blank');  
		})
		
		function showinfo(name){
			$('#listpost div').remove();
			$.ajax({
				url:'../find_posts?pname='+name,
				method:'get',
				success:function(result){
					$.each(result,function(index,obj){
						$('#listpost').append('<div class="cardBox">'+
							'<div class="headerBox" style="background-color: #FF7701;">'+
							'<p>'+
							'<a title="查看详情" style="cursor: pointer; color:white" target="_blank"  href="../view_posts?pid='+obj.p_id+'">'+obj.p_theme+'</a><br>'+
							'<br/>'+
							'<span>浏览量：'+obj.p_view+'</span>'+
							'</p>'+
							'</div>'+
							'<div class="bodyBox">'+
							'<br/>'+
							'<p>发 帖 人：'+'<a href="#">'+obj.p_account+'</a></p>'+
							'<p>帖子ID：'+obj.p_id+'</p>'+
							'<p>所属板块：<a href="#">'+obj.p_plate+'</a></p>'+
							'<p>发帖时间：'+obj.p_time+'</p>'+
							'</div>'+
							'</div>');
					});
				}
			});
		}
	</script>
</html>